<template>
  <div>
    <div style="display: flex;align-items: center;justify-content: center;">
      <el-card style="width: 80%;margin-top: 30px">
        <div style="margin-bottom: 10px;margin-left:5px;font-size: 20px;font-weight: bold;">线下订单</div>
        <div style="margin-bottom: 10px">
          <el-input style="width: 200px;margin: 0 5px" placeholder="查询店名" v-model="shop_name"></el-input>
          <el-button type="primary" @click="load(1)">查询</el-button>
          <el-button type="success" @click="reset">重置</el-button>
          <el-button type="danger" @click.native="$router.push('/business/roomDetail')">新增线下订单</el-button>
        </div>
        <el-table ref="userTable" :data="tableData" stripe
                  :header-cell-style="{backgroundColor:'aliceblue',color:'#666'}">
          <el-table-column prop="id" label="订单号"></el-table-column>
          <el-table-column prop="hotel_name" label="酒店名称"></el-table-column>
          <el-table-column prop="room_type" label="房间类型"></el-table-column>
          <el-table-column prop="price" label="价格 "></el-table-column>
          <el-table-column prop="status" label="订单状态"></el-table-column>
          <el-table-column label="操作" width="150%" align="center">
            <template v-slot="scope">
              <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">完成</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin: 10px 0">
          <el-pagination
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="pageSize"
              layout="total,  prev, pager, next"
              :total="total">
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  name: "offlineOrders",
  data() {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 5,
      total: 0,
      shop_name: '',
      hotel: [],
      hotelData: {},
    }
  },
  created() {
    this.load_business_id()
    this.load()
  },
  methods: {
    load_business_id() {
      this.$request.post('/hotel_search/', {
        "business_id": this.user.id,
      }).then(res => {
        if (res.code === '200') {
          this.hotel = res.data.hotel_list;
          const length = this.hotel.length;
          this.hotel_id = this.hotel[length - 1].id;
          this.hotelData = this.hotel[length - 1]
        } else if (res.code === '501') {
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    load(pageNum) {
      this.$request.post('/order_list/', {
        "hotel_id": this.hotel_id,
        "page_size": this.pageSize,
        "page_id": pageNum,
      }).then(res => {
        if (res && res.data) {
          this.tableData = res.data.order_list
        }
      })
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum)
    },
    handleEdit(row) {//完成订单
    },
    reset() {//重置
      this.roomFrom.roomtype = ''
      this.loadR()
    },
  }
}
</script>
<style scoped>

</style>